<template>
  <div class="content_mine">
    <div
      v-show="!display"
      @click="
        () => {
          display = !display;
        }
      "
      class="icon_right"
    >
      <i class="el-icon-arrow-right"></i>
    </div>

    <transition name="el-zoom-in-center">
      <div class="left" v-show="display">
        <div
          @click="
            () => {
              display = !display;
            }
          "
          class="icon_border"
        >
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="left_content">
          <div class="logo_img">
            <img src="../../assets/2.jpg" />
          </div>
          <div class="personl">
            <div
              style="
                text-align: center;
                margin-top: 30px;
                font-size: 20px;
                font-weight: bold;
              "
            >
              你好
            </div>

            <span class="personal_name">企业简介：</span>
            <div class="personal_message" v-if="personalMessageDis">
              {{ personalform.personalSpeak?personalform.personalSpeak: '暂无简介' }}
            </div>
            <el-input
              type="textarea"
              v-else
              v-model="personalform.personalSpeak"
            ></el-input>
            <div class="button_personal">
              <el-button
                @click="
                  () => {
                    personalMessageDis = !personalMessageDis;
                  }
                "
              >{{ personalMessageDis ? "修改简介" : "确定修改" }}</el-button
              >
            </div>

            <!--  <el-button v-show="!personalMessageDis" @click="()=>{personalMessageDis = true}">确定</el-button> -->
          </div>
          <div class="footprint">
            <div>
              <div style="text-align: center; margin-bottom: 5px">0</div>
              <div>未发布</div>
            </div>
            <div>
              <div style="text-align: center; margin-bottom: 5px">1</div>
              <div>已发布</div>
            </div>
            <div>
              <div style="text-align: center; margin-bottom: 5px">2</div>
              <div>待确认</div>
            </div>
            <div>
              <div style="text-align: center; margin-bottom: 5px">2</div>
              <div>已完成</div>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <div class="right_content">
      <div class="right_content_peo">
        <div style="font-size: 20px; font-weight: 600; margin-bottom: 27px">
          企业信息：
        </div>
        <div class="button_fixed">
          <el-button type="primary" @click="chagneMessage('disMessage')"
          >{{disMessage?'修改':'确认修改'}}</el-button>
        </div>

        <div class="Message">
          <div class="message_content_box">
            姓名：
            <el-input
              placeholder="请输入内容"
              v-model="personalMessage.name"
              :disabled="!disMessage"
            >
            </el-input>
          </div>
<!--          <div class="message_content_box">-->
<!--            专业：-->
<!--            <el-input-->
<!--              placeholder="请输入内容"-->
<!--              v-model="personalMessage.name"-->
<!--              :disabled="!disMessage"-->
<!--            >-->
<!--            </el-input>-->
<!--          </div>-->
          <div class="message_content_box">
            邮箱：
            <el-input
              placeholder="请输入内容"
              v-model="personalMessage.email"
              :disabled="!disMessage"
            >
            </el-input>
          </div>
          <div class="message_content_box">
            电话：
            <el-input
              placeholder="请输入内容"
              v-model="personalMessage.iphone"
              :disabled="!disMessage"
            >
            </el-input>
          </div>
        </div>
      </div>

        <div class="right_content_peo" style="min-height: 50%">

          <div style="font-size: 20px; font-weight: 600; margin-bottom: 27px">企业详情：</div>
          <div class="button_fixed">
            <el-button type="primary" @click="chagneMessage('personalSkills')"
            >修改</el-button
            >
          </div>
          <div>
            <div class="message_content_box">
              <el-input
                placeholder="请输入内容"
                v-model="personalMessage.name"
                :disabled="!personalSkills"
                type="textarea"
              >
              </el-input>
            </div>
          </div>

        </div>


<!--      <div class="right_content_peo">-->
<!--        <div style="font-size: 20px; font-weight: 600; margin-bottom: 27px">项目经历：</div>-->
<!--        <div class="button_fixed">-->
<!--          <el-button type="primary" @click="chagneMessage('experience')"-->
<!--          >修改</el-button-->
<!--          >-->
<!--        </div>-->
<!--        <div>-->
<!--          <div class="message_content_box">-->
<!--            <el-input-->
<!--              placeholder="请输入内容"-->
<!--              v-model="personalMessage.name"-->
<!--              :disabled="!experience"-->
<!--              type="textarea"-->
<!--            >-->
<!--            </el-input>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script>
  export default {
    name: "company-message",

    data() {
      return {
        activeName: "first",
        display: true,
        disMessage: false,
        personalSkills: false,
        experience:false,
        personalMessageDis: true,
        personalform: {
          personalSpeak: "",
        },
        personalMessage: {
          iphone: "1356545454",
          major: "软件工程系",
          sex: 1,
          email: "123@qq.com",
          name: "你好",
        },
      };
    },
    methods: {
      //标签页
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleClose(done) {
        this.$confirm("确认关闭？")
          .then((res) => {
            done();
          })
          .catch((res) => {});
      },
      chagneMessage(value) {
        console.log(this[value]);
        if(!this[value]){
          // this.$ajax({}).then(res=>{
          //
          // })

          this[value] = !this[value]
          return;
        }else{
          this[value] = !this[value]
          return
        }
      },
    },
  };
</script>
<style lang="less" scoped>
  .content_mine {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    background-color: rgb(240, 242, 245);
    .icon_right {
      width: 30px;
      height: 30px;
      border: 2px solid #ccc;
      position: absolute;
      opacity: 0.5;
      top: 50%;
      transform: translate(-50%, -50%);
      left: 0;
      border-radius: 50%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      z-index: 999;
      background-color: white;
      .el-icon-arrow-right {
        font-size: 18px;
        font-weight: 800;
      }
    }
    icon_right:hover {
      opacity: 1;
    }
    .left {
      box-sizing: border-box;
      padding: 5px;
      width: 25%;
      height: 100%;
      position: relative;
      border-right: 1px solid #ddd;
      background-color: white;
      /*margin-right: 2%;*/
      /*display: flex;*/
      /*justify-content: start;*/
      /*align-items: center;*/
      .left_content {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .logo_img {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .footprint {
          width: 100%;
          display: flex;
          margin-top: 10px;
          position: absolute;
          bottom: 17%;
          justify-content: space-around;
        }
      }
    }
    .right_content {
      flex: 1;
      box-sizing: border-box;
      padding: 1%;
    }
  }
  .icon_border {
    width: 30px;
    height: 30px;
    border: 2px solid #ccc;
    border-radius: 50%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
    z-index: 10;
    background-color: white;
    .el-icon-arrow-left {
      /*font-weight: bold;*/
      font-size: 18px;
    }
  }
  .personl {
    width: 95%;

    .button_personal {
      margin-top: 10px;
      text-align: center;
    }
    .personal_name {
      font-size: 13px;
      display: inline-block;
      width: 95%;
      /*background-color: skyblue;*/
      margin-top: 20px;
      margin-bottom: 20px;
      text-align: center;
    }
  }
  .personal_message {
    font-size: 13px;
    width: 95%;
    text-align: center;
    overflow: hidden;
    word-break: break-all;
  }
  .right_content_peo {
    background-color: white;
    min-height: 32%;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    margin: 0 0 10px 0;
    position: relative;
    .button_fixed {
      position: absolute;
      right: 30px;
      top: 10px;
    }
    .Message {
      width: 95%;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      .message_content_box {
        display: flex;
        width: 40%;
        margin: 1%;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .el-input{
    width: 74%;
  }
</style>
